<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Xenon Boostrap Admin Panel" />
	<meta name="author" content="" />
	
	<title>Xenon - Form Validation</title>

	<link rel="stylesheet" href="http://fonts.useso.com/css?family=Arimo:400,700,400italic">
	<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
	<link rel="stylesheet" href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/xenon-core.css">
	<link rel="stylesheet" href="assets/css/xenon-forms.css">
	<link rel="stylesheet" href="assets/css/xenon-components.css">
	<link rel="stylesheet" href="assets/css/xenon-skins.css">
	<link rel="stylesheet" href="assets/css/custom.css">

	<script src="assets/js/jquery-1.11.1.min.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	
	
</head>
<body class="page-body">

	
	<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
			
		<!-- Add "fixed" class to make the sidebar fixed always to the browser viewport. -->
		<!-- Adding class "toggle-others" will keep only one menu item open at a time. -->
		<!-- Adding class "collapsed" collapse sidebar root elements and show only icons. -->
	
		
		<div class="main-content">
					
			<!-- User Info, Notifications and Menu Bar -->
		
		
			<div class="panel panel-default">
			
				<div class="panel-heading">
					<div class="panel-title">
						Input validation
					</div>
					
					<small class="text-small pull-right" style="padding-top:5px;">
						<code>data-validate="rule1,rule2,...,ruleN"</code>
					</small>
				</div>
				
				<div class="panel-body">
				
					<form role="form" id="form1" method="post" class="validate">
						
						<div class="form-group">
							<label class="control-label">Required Field + Custom Message</label>
							
							<input type="text" class="form-control" name="name" data-validate="required" data-message-required="This is custom message for required field." placeholder="Required Field" />
						</div>
						
						<div class="form-group">
							<label class="control-label">Email Field</label>
							
							<input type="text" class="form-control" name="email" data-validate="email" placeholder="Email Field" />
						</div>
						
						<div class="form-group">
							<label class="control-label">Input Min Field</label>
							
							<input type="text" class="form-control" name="min_field" data-validate="number,minlength[4]" placeholder="Numeric + Minimun Length Field" />
						</div>
						
						<div class="form-group">
							<label class="control-label">Input Max Field</label>
							
							<input type="text" class="form-control" name="max_field" data-validate="maxlength[2]" placeholder="Maximum Length Field" />
						</div>
						
						<div class="form-group">
							<label class="control-label">Numeric Field</label>
							
							<input type="text" class="form-control" name="number" data-validate="number" placeholder="Numeric Field" />
						</div>
						
						<div class="form-group">
							<label class="control-label">URL Field</label>
							
							<input type="text" class="form-control" name="url" data-validate="required,url" placeholder="URL" />
						</div>
						
						<div class="form-group">
							<label class="control-label">Credit Card Field</label>
							
							<input type="text" class="form-control" name="creditcard" data-validate="required,creditcard" placeholder="Credit Card" />
						</div>
						
						<div class="form-group">
							<button type="submit" class="btn btn-success">Validate</button>
							<button type="reset" class="btn btn-white">Reset</button>
						</div>
					
					</form>
				
				</div>
			
			</div>
			<!-- Main Footer -->
			<!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
			<!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
		
		</div>
		
			
		<!-- start: Chat Section -->
	
		<!-- end: Chat Section -->
		
		
	</div>
	
	
	



	<!-- Bottom Scripts -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/TweenMax.min.js"></script>
	<script src="assets/js/resizeable.js"></script>
	<script src="assets/js/joinable.js"></script>
	<script src="assets/js/xenon-api.js"></script>
	<script src="assets/js/xenon-toggles.js"></script>


	<!-- Imported scripts on this page -->
	<script src="assets/js/jquery-validate/jquery.validate.min.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="assets/js/xenon-custom.js"></script>

</body>
</html>